import React from 'react';
import { Link } from 'react-router';
import { Row, Col, Card, Button } from 'antd';
import Header from '../../components/header';

export default class Register extends React.Component{
    constructor(props){
        super(props)
    }
    static contextTypes = {
        router: React.PropTypes.object
    };
    back2Login(){
        this.context.router.push('/login')}
    regSpecialist(){
        this.context.router.push('/reg-spec-form')
    }
    regUser(){
        this.context.router.push('/reg-form')
    }
    render(){
        const colProps = {
            xs:{span:11},
            sm:{span:10},
            md:{span:10},
            lg:{span:8}
        },
        listStyle = {
            listStyle: 'square',
            paddingLeft: '20px',
            paddingBottom: '10px',
            fontSize: '14px',
            lineHeight: '2em'
        };
        return(
            <Row type="flex" justify="space-around" align="top" style={{
                padding: '20px 0'
            }}>
                <Col {...colProps}>
                    <Card title="个人注册">
                        <ul style={listStyle}>
                            <li>储存管理DICOM影像</li>
                            <li>管理亲友病例和影像信息</li>
                            <li>分享影像报告</li>
                            <li>10086位阅片专家随时提供一对一服务</li>
                        </ul>
                        <div style={{textAlign:'right'}}>
                            <a href="###">返回登录</a>&nbsp;&nbsp;&nbsp;&nbsp;
                            <Button size="large" onClick={this.regUser.bind(this)}>注册成为用户</Button>
                        </div>

                    </Card>
                </Col>
                <Col {...colProps}>
                    <Card title="专家注册">
                        <ul style={listStyle}>
                            <li>千万待阅片用户</li>
                            <li>精准的阅片订单推送</li>
                            <li>安全的财务管理系统</li>
                            <li>灵活的服务时间设置</li>
                        </ul>
                        <div style={{textAlign:'right'}}>
                            <a href="###" onClick={this.back2Login.bind(this)}>返回登录</a>&nbsp;&nbsp;&nbsp;&nbsp;
                            <Button type="primary" size="large" onClick={this.regSpecialist.bind(this)}>注册成为专家</Button>
                        </div>
                    </Card>
                </Col>
            </Row>
        )
    }
}